<template>
	<view :style="skin" class="content">
		<HeadBigTitle title="选择位置" />
		<iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
					ref="iframe">
		</iframe>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import HeadBigTitle from '@/components/HeadBigTitle.vue'
	export default {
		data() {
			return {
				typeUrl: "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=QOHBZ-JW6K2-HQHUX-CM2QK-ZA6XJ-6SBAU&referer=myapp",
				frameHeight: getApp().globalData.windowHeight,
				frameWidth: getApp().globalData.windowWidth,		
			};
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.frameWidth = res.windowWidth
					that.frameHeight = res.windowHeight - 100
				}
			});
		},
		methods: {
			receiveMessage(arg) {
				uni.$emit('updateLocation',{msg:arg})
				uni.navigateBack()
			},
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})
		},
		components: {
			HeadBigTitle,
		}
	}
</script>

<script module="locationPicker" lang="renderjs">
	export default {
		mounted() {
			window.addEventListener("message", this.receiveMsg, false);
		},
		methods: {
			receiveMsg(data) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = data.data;
				if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					this.$ownerInstance.callMethod('receiveMessage', loc)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		
	}
</style>